<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>卡片管理</title>


    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link th:href="@{../css/card.css}" rel="stylesheet" type="text/css">
</head>
<body>


<!--    顶部导航栏-->
    <nav id="topBar" class="navbar navbar-default navbar-fixed-top" >
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" th:href="@{/cardmanage}">管理界面</a>
        </div>

        <ul class="nav navbar-nav navbar-right">
            <li><a th:href="@{/index}">抽卡界面</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">昵称:<span th:text="${session.nickname}"></span><span class="caret"></span></a>
                <ul id="ulLi1" class="dropdown-menu">
                    <li><a ><span th:text="${session.nickname}"></span></a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">个人信息</a></li>
                    <li><a href="#">历史记录</a></li>
                    <li><a th:href="@{/loginout}">退出登录</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

<!--    主界面-->
    <div id="main" class="row">

        <!--  主界面,左导航栏-->
        <div id="leftBar" class="col-md-2 col-xs-2 bg-success ">
        <ul class="nav nav-pills nav-stacked ">
            <li role="presentation" class="active"> <a href="#"><span class="glyphicon glyphicon-th-large glyphicon-size3" aria-hidden="true"> </span> &nbsp;&nbsp;返回抽卡界面</a></li>
            <li role="presentation"><a href="#"><span class="glyphicon glyphicon-th glyphicon-size3" aria-hidden="true"> </span> &nbsp;&nbsp;卡片管理</a></li>
            <li role="presentation"><a href="#"><span class="glyphicon glyphicon-th-list glyphicon-size3" aria-hidden="true "> </span> &nbsp;&nbsp;用户管理</a></li>
        </ul>
    </div>




        <!--    主界面 右导航栏-->
        <div id="mainRightBar" class="col-md-10 col-xs-10 ">

            <!--增加数据 样式-->
            <div id="addData">
                <p class="glyphicon-size1">卡片管理</p>
                <a data-toggle="modal" data-target="#addCardModal" v-on:click="setMessageNull">
                    <span class="glyphicon glyphicon-plus glyphicon-size3" aria-hidden="true"></span>
                    &nbsp;<p class="glyphicon-size1">增加卡片</p>
                </a>
            </div>

            <div id="rightBar">
            <!--            查询样式 vue使用-->
            <div class="row">
                <div class="col-md-2 col-xs-2">
                    <p class="glyphicon-size">卡片管理查询</p>
                </div>
                <div class="col-md-3 col-xs-3">
                    <div id="vue-el-search" class="input-group ">
                        <input type="text" class="form-control" placeholder="请输入角色关键字进行查找" v-model="cardName">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" v-on:click="setSearchName"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                        </span>
                    </div>
                </div>
                <div class="col-md-2 col-xs-2">
                    <p class="glyphicon-size">每页显示</p>
                </div>


                <!-- Split button -->
                <div id="vue-el-setsize" class="btn-group">
                    <button type="button" class="btn btn-info">{{size}}条</button>
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li v-on:click="size=4;setSize()"><a >4条</a></li>
                        <li v-on:click="size=6;setSize()"><a >6条</a></li>
                        <li v-on:click="size=9;setSize()"><a >9条</a></li>
                        <li v-on:click="size=12;setSize()"><a >12条</a></li>
                        <li role="separator" class="divider"></li>
                        <li v-on:click="size=3;setSize()"><a >默认:3条</a></li>
                    </ul>
                </div>

            </div>

            <!--查看卡片表-->
            <table  border='1' cellspacing='0' class="table table-striped table-hover table-bordered">
                <thead class="bg-primary">
                <tr>
                    <th>卡片号</th>
                    <th>Url</th>
                    <th>角色</th>
                    <th>起点</th>
                    <th>终点</th>
                    <th>抽卡概率</th>
                    <th>角色等级</th>
                    <th>游戏名</th>
                    <th colspan="2">操作</th>
                </tr>
                </thead>
                <tbody id="cardPaging">
                <tr v-if="cardPaging.data.cardinfos.length==0">
                    <td colspan="10"><span>很抱歉,当前条件下暂无数据</span></td>
                </tr>
                <tr v-for="cardinfo in cardPaging.data.cardinfos" v-if="cardPaging.data.cardinfos!=0">

                    <td>{{cardinfo.cardId}}</td>
                    <td ><img v-bind:src="cardinfo.cardAddress"v-bind:alt="cardinfo.cardAddress"></td>
                    <td>{{cardinfo.cardName}}</td>
                    <td>{{cardinfo.cardChancef}}</td>
                    <td>{{cardinfo.cardChancel}}</td>
                    <td>{{cardinfo.cardChance}}</td>
                    <td>{{cardinfo.cardLevel}}</td>
                    <td>{{cardinfo.gameName}}</td>
<!--                    th:each="cardinfo : ${cardinfos}"-->
                    <td>
                        <a data-toggle="modal" data-target="#updateCardModal"
                                v-on:click="setMessageNull();setUpdateData(cardinfo.cardId,cardinfo.cardAddress,cardinfo.cardName,cardinfo.cardChancef,cardinfo.cardChancel
                                            ,cardinfo.cardChance,cardinfo.cardLevel,cardinfo.gameName)">
                            修改
                        </a>
                    </td>
                    <td><a data-toggle="modal" data-target="#deleteModal"
                            v-on:click="setMessageNull();setDeleteData(cardinfo.cardId)">
                            删除
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>

                <!-- 进度条-->
                <div class="progress" id="vue-el-data">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" v-bind:style="'width:'+(page/(totalPage*1.0))*100+'%'">
                        <span >{{page}}/{{totalPage}}</span>
                    </div>
                </div>


<!--            分页,为vue做准备-->
                <div id="vue-el-setpage" class="row">
                    <div class="col-md-6 col-xs-6 ">
                        <!--占位-->
                    </div>
                    <nav aria-label="Page navigation" class="col-md-6 col-xs-6 ">
                        <ul class="pagination pagination-lg">
                            <li v-on:click="setPage(page-1)" v-if="page>=2">
                                <a aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li v-for="n in 2" v-on:click="setPage(page- (3-n))" v-if="(page- (3-n))>=1 && (page- (3-n))<=page"><a >{{page- (3-n)}}</a></li>
                            <li v-for="n in 3" v-on:click="setPage(page+ n-1)" v-if="(page+ n-1)>=1 && (page+ n-1)<=totalPage" v-bind:class="{'active':(page==page+n-1)}"><a >{{page+ n-1}}</a></li>
                            <li v-on:click="setPage(page+1)" v-if="page<=totalPage-1">
                                <a aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

           </div>
        </div>

    </div>

<!--    增加卡片-->
    <div class="modal fade" id="addCardModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="vue-el-addCard">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">增加卡片</h4>
                    <p style="color: rgb(51,122,183);">{{message}}</p>
                </div>
                <div class="modal-body">
                <!--    内容-->
                <div class="input-group">
                    <span class="input-group-addon" >卡片号</span>
                    <input type="text" class="form-control" placeholder="卡片id,最好是输入连续的id值" aria-describedby="sizing-addon2" v-model="cardId">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">url地址</span>
                    <input type="text" class="form-control" placeholder="卡片的url地址" aria-describedby="sizing-addon2" v-model="cardAddress">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">角色名 </span>
                    <input type="text" class="form-control" placeholder="卡片人物的角色名称" aria-describedby="sizing-addon2" v-model="cardName">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">范围起始</span>
                    <input type="text" class="form-control" placeholder="随机数掉落到的区域起点,相当于左区间" aria-describedby="sizing-addon2" v-model="cardChancef">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">范围终末</span>
                    <input type="text" class="form-control" placeholder="随机数掉落到的区域起点,相当于右区间" aria-describedby="sizing-addon2" v-model="cardChancel">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">抽卡概率</span>
                    <input type="text" class="form-control" placeholder="该值为整数,输入的值除以1000,就是目标概率值" aria-describedby="sizing-addon2" v-model="cardChance">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">角色星级</span>
                    <input type="text" class="form-control" placeholder="角色在游戏中的星级" aria-describedby="sizing-addon2" v-model="cardLevel">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">所属游戏</span>
                    <input type="text" class="form-control" placeholder="角色所属游戏" aria-describedby="sizing-addon2" v-model="gameName">
                </div>


            </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" v-on:click="addCardinfo">增加</button>
                </div>
            </div>
        </div>
    </div>

<!--    修改卡片-->
    <div class="modal fade" id="updateCardModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="vue-el-updateCard">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">修改卡片</h4>
                <p style="color: rgb(51,122,183);">{{message}}</p>
            </div>
            <div class="modal-body">
                <!--    内容-->
                <div class="input-group">
                    <span class="input-group-addon" >卡片号</span>
                    <input type="text" class="form-control" placeholder="卡片id,最好是输入连续的id值" aria-describedby="sizing-addon2" v-model="cardId">
                </div>

                <div class="input-group">
                    <span class="input-group-addon" >修改卡片号</span>
                    <input type="text" class="form-control" placeholder="卡片id,最好是输入连续的id值" aria-describedby="sizing-addon2" v-model="updateCardId">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">url地址</span>
                    <input type="text" class="form-control" placeholder="卡片的url地址" aria-describedby="sizing-addon2" v-model="cardAddress">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">角色名 </span>
                    <input type="text" class="form-control" placeholder="卡片人物的角色名称" aria-describedby="sizing-addon2" v-model="cardName">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">范围起始</span>
                    <input type="text" class="form-control" placeholder="随机数掉落到的区域起点,相当于左区间" aria-describedby="sizing-addon2" v-model="cardChancef">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">范围终末</span>
                    <input type="text" class="form-control" placeholder="随机数掉落到的区域起点,相当于右区间" aria-describedby="sizing-addon2" v-model="cardChancel">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">抽卡概率</span>
                    <input type="text" class="form-control" placeholder="该值为整数,输入的值除以1000,就是目标概率值" aria-describedby="sizing-addon2" v-model="cardChance">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">角色星级</span>
                    <input type="text" class="form-control" placeholder="角色在游戏中的星级" aria-describedby="sizing-addon2" v-model="cardLevel">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">所属游戏</span>
                    <input type="text" class="form-control" placeholder="角色所属游戏" aria-describedby="sizing-addon2" v-model="gameName">
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" v-on:click="updateCardinfo">修改</button>
            </div>
        </div>
    </div>
</div>

<!--    删除卡片-->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="vue-el-deleteCard">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">删除卡片</h4>
                    <p style="color: rgb(51,122,183);">{{message}}</p>
                </div>
                <div class="modal-body">
                    请再次确认删除
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" v-on:click="deleteCardCardinfo">删除</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="../js/card.js"></script>
</body>
</html>